<template>
  <div class="form-designer-right">
    <div class="property-panel">
      <div class="file-system">
        <div class="file-system-header">
          <span class="tag" @click="selectTag('interactions')"
            :class="{ 'select-tag': tag === 'interactions' }">交互</span>
          <span class="tag" @click="selectTag('style')" :class="{ 'select-tag': tag === 'style' }">样式</span>
        </div>
        <div class="file-system-content">
          <div v-if="tag === 'interactions'" class="interactions-content">

          </div>
          <div v-if="tag === 'style'" class="style-content">
            <div class="style-group">
              <el-input v-model="name" placeholder="名称" />
            </div>
            <div class="style-group">
              <div style="display: flex;margin-bottom: 10px;">
                <div class="edit-icon">
                  <SvgAlignLeftLine viewBox="0 0 24 24" />
                </div>
                <div class="edit-icon">
                  <SvgAlignHorizontalCenterLine viewBox="0 0 24 24" />
                </div>
                <div class="edit-icon">
                  <SvgAlignRightLine viewBox="0 0 24 24" />
                </div>
                <div class="edit-icon">
                  <SvgAlignTopLine viewBox="0 0 24 24" />
                </div>
                <div class="edit-icon">
                  <SvgAlignVerticalCenterLine viewBox="0 0 24 24" />
                </div>
                <div class="edit-icon">
                  <SvgAlignBottomLine viewBox="0 0 24 24" />
                </div>
              </div>
              <div style="margin-bottom: 10px;display: flex;">
                <div class="attr-edit" style="margin-right:32px;">
                  x <el-input style="width: 60px;"></el-input>
                </div>
                <div class="attr-edit">
                  y <el-input style="width: 60px;"></el-input>
                </div>
              </div>
              <div style="display: flex;">
                <div class="attr-edit">
                  w <el-input style="width: 60px;"></el-input>
                </div>
                <SvgUnlockLine @click="lock = false" v-if="lock" style="transform: scale(0.6);" viewBox="0 0 24 24" />
                <SvgLockLine @click="lock = true" v-else style="transform: scale(0.6);" viewBox="0 0 24 24" />
                <div class="attr-edit">
                  h <el-input style="width: 60px;"></el-input>
                </div>
              </div>
            </div>
            <div>
              <el-collapse v-model="activeNames" @change="handleChange">
                <el-collapse-item title="字体" name="1">
                  <div>
                    <el-select v-model="fontFamily" size="small">
                      <el-option v-for="item in fontFamilyList" :key="item" :label="item" :value="item" />
                    </el-select>
                    <div style="display: flex;margin-top: 10px;">
                      <el-select v-model="fontStyle" style="flex: 1;">
                        <el-option label="标准" value="normal" />
                        <el-option label="斜体" value="italic" />
                        <el-option label="加粗" value="bold" />
                      </el-select>
                      <el-select v-model="fontSize" style="width: 70px;margin-left: 10px;">
                        <el-option label="12" value="12" />
                        <el-option label="13" value="13" />
                        <el-option label="14" value="14" />
                        <el-option label="15" value="15" />
                        <el-option label="16" value="16" />
                        <el-option label="17" value="17" />
                        <el-option label="18" value="18" />
                        <el-option label="19" value="19" />
                        <el-option label="20" value="20" />
                      </el-select>
                    </div>
                    <div style="display: flex;align-items: center;">
                      <el-color-picker v-model="color" style="margin: 10px 10px 10px 0;" />
                      <el-input v-model="color" style="width: 60px;"></el-input>
                    </div>
                    <div style="display: flex;">
                      <div class="edit-icon">
                        <SvgAlignLeftLine viewBox="0 0 24 24" />
                      </div>
                      <div class="edit-icon">
                        <SvgAlignCenterLine viewBox="0 0 24 24" />
                      </div>
                      <div class="edit-icon">
                        <SvgAlignRightLine viewBox="0 0 24 24" />
                      </div>
                      <div class="edit-icon">
                        <SvgAlignJustifyLine viewBox="0 0 24 24" />
                      </div>
                    </div>
                  </div>
                </el-collapse-item>
                <el-collapse-item title="填充" name="2">
                  <div style="display: flex;align-items: center;">
                    <el-color-picker v-model="backgroundColor" style="margin: 10px 10px 10px 0;" />
                    <el-input v-model="backgroundColor" style="width: 60px;"></el-input>
                  </div>
                </el-collapse-item>
                <el-collapse-item title="边框" name="3">
                  <div style="display: flex;align-items: center;">
                    <el-color-picker v-model="borderColor" style="margin: 10px 10px 10px 0;" />
                    <el-input v-model="borderColor" style="width: 60px;margin-right: 10px;"></el-input>
                    <el-input v-model="borderWidth" style="width: 60px;"></el-input>
                  </div>
                </el-collapse-item>
                <el-collapse-item title="边距" name="4">
                  <div style="display: flex;">
                    <div class="attr-edit">
                      L <el-input v-model="paddingLeft" style="width: 40px;"></el-input>
                    </div>
                    <div class="attr-edit">
                      T <el-input v-model="paddingTop" style="width: 40px;"></el-input>
                    </div>
                    <div class="attr-edit">
                      R <el-input v-model="paddingRight" style="width: 40px;"></el-input>
                    </div>
                    <div class="attr-edit">
                      B <el-input v-model="paddingBottom" style="width: 40px;"></el-input>
                    </div>
                  </div>
                </el-collapse-item>
              </el-collapse>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed, ref, onMounted, nextTick } from 'vue'
import { ElMessage } from 'element-plus'
import { useFormDesignerStore, type FormField } from '@/stores/formDesigner'
import SvgAlignLeftLine from '@/assets/svg/align_left_2_line.svg'
import SvgAlignHorizontalCenterLine from '@/assets/svg/align_horizontal_center_line.svg'
import SvgAlignRightLine from '@/assets/svg/align_right_2_line.svg'
import SvgAlignTopLine from '@/assets/svg/align_top_line.svg'
import SvgAlignVerticalCenterLine from '@/assets/svg/align_vertical_center_line.svg'
import SvgAlignBottomLine from '@/assets/svg/align_bottom_line.svg'
import SvgUnlockLine from '@/assets/svg/unlock_line.svg'
import SvgLockLine from '@/assets/svg/lock_line.svg'
import SvgAlignCenterLine from '@/assets/svg/align_center_line.svg'
import SvgAlignJustifyLine from '@/assets/svg/align_justify_line.svg'

const formDesignerStore = useFormDesignerStore()
const tag = ref('style')
// 从store获取数据
const currentForm = computed(() => formDesignerStore.currentForm)
const selectedField = computed(() => formDesignerStore.selectedField)
const lock = ref(false)
const name = ref('')

import type { CollapseModelValue } from 'element-plus'

const activeNames = ref(['1', '2', '3', '4'])
const handleChange = (val: CollapseModelValue) => {
  console.log(val)
}
const fontFamily = ref('宋体')
const fontFamilyList = ref(['宋体', '黑体', '楷体', '仿宋'])
const fontStyle = ref('normal')
const fontSize = ref('12')
const color = ref('')
const backgroundColor = ref('')
const borderColor = ref('')
const borderWidth = ref('')
const paddingLeft = ref('')
const paddingTop = ref('')
const paddingRight = ref('')
const paddingBottom = ref('')

// 表单背景色
const formBackgroundColor = ref('#ffffff')

// 生成代码
const generatedCode = computed(() => {
  return formDesignerStore.generateFormCode()
})

// 更新表单标题
const updateFormTitle = () => {
  // 这里可以添加防抖逻辑
  formDesignerStore.updateField('form', { title: currentForm.value.title })
}

// 更新表单描述
const updateFormDescription = () => {
  formDesignerStore.updateField('form', { description: currentForm.value.description })
}

// 更新布局
const updateLayout = () => {
  formDesignerStore.updateField('form', { layout: currentForm.value.layout })
}

// 更新表单背景
const updateFormBackground = (color: string) => {
  if (!currentForm.value.style) {
    currentForm.value.style = {}
  }
  currentForm.value.style.backgroundColor = color
  formDesignerStore.updateField('form', { style: currentForm.value.style })
}

// 更新选中字段
const updateSelectedField = () => {
  if (selectedField.value) {
    formDesignerStore.updateField(selectedField.value.id, selectedField.value)
  }
}

// 获取字段类型名称
const getFieldTypeName = (type: string) => {
  const typeNames: Record<string, string> = {
    'input': '文本输入',
    'textarea': '多行文本',
    'select': '下拉选择',
    'radio': '单选按钮',
    'checkbox': '复选框',
    'date': '日期选择',
    'number': '数字输入',
    'email': '邮箱输入',
    'password': '密码输入',
    'tel': '电话输入',
    'url': 'URL输入'
  }
  return typeNames[type] || type
}

// 判断是否为选择类型
const isSelectType = (type: string) => {
  return ['select', 'radio'].includes(type)
}

// 添加选项
const addOption = () => {
  if (selectedField.value && selectedField.value.options) {
    selectedField.value.options.push({
      label: `选项${selectedField.value.options.length + 1}`,
      value: `option${selectedField.value.options.length + 1}`
    })
    updateSelectedField()
  }
}

// 删除选项
const removeOption = (index: number) => {
  if (selectedField.value && selectedField.value.options) {
    selectedField.value.options.splice(index, 1)
    updateSelectedField()
  }
}

// 复制代码
const copyCode = async () => {
  try {
    await navigator.clipboard.writeText(generatedCode.value)
    ElMessage.success('代码已复制到剪贴板')
  } catch (error) {
    ElMessage.error('复制失败，请手动复制')
  }
}

// 选择标签
const selectTag = (str: string) => {
  tag.value = str
}
</script>

<style scoped lang="scss">
.form-designer-right {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.file-system {


  .file-system-content {
    overflow-y: scroll;

  }

  &-header {
    padding: 10px 10px 0 10px;
    color: #A1A1AA;

    .edit-icon-group {
      display: flex;
      align-items: center;

      &-item-1 {
        flex: 1;
        display: flex;
        align-items: center;

      }

      &-item-2 {
        width: 100px;
        display: flex;
        justify-content: end;
      }
    }
  }

  &-content {
    .style-content {

      .style-group {
        border-bottom: 1px solid var(--layout-boder-color);
        padding: 10px 15px;
      }
    }
  }
}

.attr-edit {
  margin-right: 5px;
  display: flex;
  align-items: center;
  gap: 5px;
}

.edit-icon {
  padding: 4px;
  border-radius: 5px;
  width: 20px;
  height: 20px;
  display: flex;
  justify-content: center;
  align-items: center;

  &:hover {
    background: rgba($color: #000000, $alpha: 0.1);
  }

  &.active {
    background: rgba($color: #409eff, $alpha: 0.2);
    color: #409eff;
  }
}

.tag {
  color: #A1A1AA;
  cursor: pointer;
  margin-right: 10px;
}

.select-tag {
  color: #3B82F6;
  font-weight: bold;
}

.property-panel,
.code-preview {
  flex: 1;
  border-bottom: 1px solid #e4e7ed;

  &:last-child {
    border-bottom: none;
  }
}

.panel-header {
  padding: 16px 20px;
  border-bottom: 1px solid #e4e7ed;
  background: #f5f7fa;
  display: flex;
  justify-content: space-between;
  align-items: center;

  h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: #303133;
  }
}

.panel-content {
  padding: 20px;
  height: calc(100% - 60px);
  overflow-y: auto;
}

.field-info {
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid #e4e7ed;

  h4 {
    margin: 0 0 8px 0;
    font-size: 16px;
    color: #303133;
  }

  .field-type {
    margin: 0;
    font-size: 12px;
    color: #909399;
    background: #f0f2f5;
    padding: 4px 8px;
    border-radius: 4px;
    display: inline-block;
  }
}

.options-container {
  .option-item {
    display: flex;
    gap: 8px;
    margin-bottom: 8px;
    align-items: center;

    .el-input {
      flex: 1;
    }
  }

  .add-option-btn {
    width: 100%;
    margin-top: 8px;
  }
}

.code-preview {
  .code-content {
    padding: 20px;
    height: calc(100% - 60px);
    overflow-y: auto;

    pre {
      margin: 0;
      background: #f8f9fa;
      border-radius: 6px;
      padding: 16px;
      font-size: 12px;
      line-height: 1.5;
      color: #24292e;
      overflow-x: auto;

      code {
        font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
      }
    }
  }
}
</style>
